<script lang="ts" setup name="TimingPanel">
import useTime from '@/hooks/useTime'

const {formattedCurrentDate, formattedCurrentTime} = useTime()
</script>

<template>
  <div class="panel-container">  
    <h2>当前时间</h2>  
    <p>{{ formattedCurrentDate }} - {{ formattedCurrentTime }}</p>
  </div>  
</template>

<style lang="less" scoped>
.panel-container {  
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;

  h2 {  
    color: #333;
    text-align: left;
    font-size: 20px;
  }  

  p {  
    font-size: 1.2rem;
    color: #666;
    text-align: left;
    font-size: 22px
  }
}
</style>
